<template>
  <div class="chart-container">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column  label="分行名称" >
            <template slot-scope="scope">
              <el-select
              v-model="scope.row.branck_name"
              clearable
              filterable 
              placeholder="请选择"
              @change="getBandIdFm"
            >
              <el-option
                v-for="item in typeBankList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            </template>
      </el-table-column>
      <el-table-column  label="系统名称" >
             <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.system"
                    clearable
                    filterable 
                    placeholder="请选择"
                    @change="restBandDataFm"
                  >
                    <el-option
                      v-for="item in typedepartmentList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
             </template>
      </el-table-column>
   

      <el-table-column  label="集群">
        <template slot-scope="scope">
             <el-select
                    v-model="scope.row.cluster"
                    clearable
                    filterable 
                    placeholder="请选择"
                    @change="restDepentDataFm"
                  >
                    <el-option
                      v-for="item in clusterData"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
       </template>
      </el-table-column>

      <el-table-column  label="模块名称">
        <template slot-scope="scope">
             <el-input v-model="scope.row.module_name" placeholder=""></el-input>
       </template>
      </el-table-column>

       <el-table-column  label="模块部署用户">
            <template slot-scope="scope">
               <el-input v-model="scope.row.module_user" placeholder=""></el-input>
            </template>
       </el-table-column>

       <el-table-column  label="模块描述">
            <template slot-scope="scope">
               <el-input v-model="scope.row.describe" placeholder=""></el-input>
            </template>
       </el-table-column>

       <el-table-column  label="负载均衡模式">
            <template slot-scope="scope">
               <el-input v-model="scope.row.lb_mode" placeholder=""></el-input>
            </template>
       </el-table-column>

       <el-table-column  label="均衡对外地址">
            <template slot-scope="scope">
               <el-input v-model="scope.row.lb_address" placeholder=""></el-input>
            </template>
       </el-table-column>

      <el-table-column  label="模块启动命令">
            <template slot-scope="scope">
               <el-input v-model="scope.row.start_cmd" placeholder=""></el-input>
            </template>
       </el-table-column>

        <el-table-column  label="模块停止命令">
            <template slot-scope="scope">
               <el-input v-model="scope.row.stop_cmd" placeholder=""></el-input>
            </template>
       </el-table-column>

       <el-table-column  label="备注">
            <template slot-scope="scope">
               <el-input v-model="scope.row.tips" placeholder=""></el-input>
            </template>
       </el-table-column>

    </el-table>
    <div style="padding-left:0.8%;padding-top:15px">
      <el-button @click="getTableDataFm" type="primary">添加一行</el-button>
      <el-button @click="nextStepFm" type="primary">保存</el-button>
    </div>
     

  </div>
</template>

<script>
export default {
  name: "demoTwo",
  filters: {},
  data() {
    return {
      typeBankList: [{
          value: '0',
          label: '杭州分行1'
        }, {
          value: '1',
          label: '杭州分行2'
        }, {
          value: '2',
          label: '杭州分行3'
        }, {
          value: '3',
          label: '杭州分行4'
        }, {
          value: '4',
          label: '杭州分行5'
        }],

       typedepartmentList: [{
           parentsId:"0",
           value: '0',
           label: '杭州分行1部门1'
        }, {
           parentsId:"0",
           value: '1',
           parentsId:"0",
           label: '杭州分行1部门2'
        }, {
           parentsId:"1",
           value: '2',
           label: '杭州分行2部门1'
        }, {
           parentsId:"1",
          value: '3',
          label: '杭州分行2部门2'
        }, {
           parentsId:"2",
           value: '4',
           label: '杭州分行3部门1'
        },{
           parentsId:"3",
           value: '5',
           label: '杭州分行4部门1'
        },
        {
           parentsId:"4",
           value: '6',
           label: '杭州分行5部门1'
        }
     ],

     clusterData:[
         {
             parentsId:"0",
             value: '0',
             label: '集群0'
         },
          {
             parentsId:"1",
             value: '1',
             label: '集群1'
         },
         {
             parentsId:"2",
             value: '2',
             label: '集群2'
         },
         {
             parentsId:"3",
             value: '3',
             label: '集群3'
         },
          {
             parentsId:"4",
             value: '4',
             label: '集群4'
          },


     ],

      

      tableData: [
        {
           branck_name: "",
           system: "",
           cluster: "",
           module_name:"",
           module_user:"",
           describe:"",
           lb_mode:"",
           lb_address:"",
           start_cmd:"",
           stop_cmd:"",
           tips:"",
        },
      ],
     // value: '',
     backupData:[],//系统数据的备份
     clusterBankUpData:[],//集群数据的备份


    };
  },
  created() {},
  mounted() {
    //this.getList();
     this.backupData=this.typedepartmentList
     this.clusterBankUpData=this.clusterData

  },
  methods: {
     
      getBandIdFm(value){
         console.log(value)
         let dataArray=[]
         dataArray=this.typedepartmentList.filter(item=>item.parentsId==value)
         this.typedepartmentList=dataArray

      },
      restBandDataFm(value){
         console.log(value)
         let dataArray=[]
         dataArray=this.clusterData.filter(item=>item.parentsId==value)
         this.clusterData=dataArray
      },
      restDepentDataFm(){
         this.typedepartmentList=this.backupData
         this.clusterData=this.clusterBankUpData
      },
      getTableDataFm(){
         this.tableData.push({
           branck_name: "",
           system: "",
           cluster: "",
           module_name:"",
           module_user:"",
           describe:"",
           lb_mode:"",
           lb_address:"",
           start_cmd:"",
           stop_cmd:"",
           tips:"",
         })
      },
      //跳到下一个页面
      nextStepFm(){
        //module_name   module_user  lb_mode
         console.log(this.tableData)
         this.tableData.forEach(item=>{
           if(!item.branck_name){
              this.$message.error('分行名称不能为空');
              return
           }
           if(!item.system){
              this.$message.error('系统名称不能为空');
              return
           }
          if(!item.cluster){
              this.$message.error('集群名称不能为空');
              return
           }
           if(!item.module_name){
              this.$message.error('模块名称不能为空');
              return
           }
           if(!item.module_user){
              this.$message.error('模块部署用户不能为空');
              return
           }
           if(!item.lb_mode){
              this.$message.error('负载均衡模式不能为空');
              return
           }
         })
         this.tableData=[  {
           branck_name: "",
           system: "",
           cluster: "",
           module_name:"",
           module_user:"",
           describe:"",
           lb_mode:"",
           lb_address:"",
           start_cmd:"",
           stop_cmd:"",
           tips:"",
        }]
         this.$emit('changeCode', 'second')
         
      },

  }
};
</script>

<style>
.chart-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
}
</style>
